<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head> 
<body> 

<div data-role="page" id="page1">
	<div data-role="header">
		<h1>WELLCOME </h1>
	</div>
	<div data-role="content">	
		<ul data-role="listview">
			<li><a href="#page2">Start</a></li>
		</ul>		
	</div>
	<div data-role="footer">
		<h4>Page Footer</h4>
	</div>
</div>

<div data-role="page" id="page2">
	<div data-role="header">
		<h1>Select Crop</h1>
	</div>
	<div data-role="content">
	 <ul data-role="listview">	
		<li><a href="#page3">Barley</a></li>
		<li><a href="#page3">Oats</a></li>
        <li><a href="#page3">Triticale</a></li>
        <li><a href="#page3">Durum Wheat</a></li>
     </ul>	
	</div>
    <a href="#page1" data-role="button">Back</a>
	<div data-role="footer">
		<h4></h4>
	</div>
</div>

<div data-role="page" id="page3">
	<div data-role="header">
		<h1>Stage</h1>
	</div>
	<div data-role="content">
    <h4>Germination</h4>
      <ul data-role = "listview">
		<li><a href="#page4">Dry seed(00)</a></li>
        <li><a href="#page4">Imbibition Complete(03)</a></li>
        <li><a href="#page4">Radicle emarged from caryopsis(05)</a></li>
        <li><a href="#page4">Coleoptile emerged from seed(07)</a></li>
        <li><a href="#page4">Leap just at coleoptile tip(09)</a></li>
      </ul>	   
    <h4>Seedling Growth</h4>
      <ul data-role = "listview">	 
        <li><a href="#page4">First leaf through Coleoptile(10)</a></li>
        <li><a href="#page4">First leaf unfolded(11)</a></li>
        <li><a href="#page4">2 leaf unfolded(12)</a></li>
        <li><a href="#page4">3 leaf unfolded(13)</a></li>
        <li><a href="#page4">4 leaf unfolded(14))</a></li>
      </ul>      
	</div>
    <a href="#page2" data-role="button">Back</a>
	<div data-role="footer">		
	</div>
</div>

<div data-role="page" id="page4">
	<div data-role="header">
		<h1>Weed-Cart</h1>
	</div>
	<div data-role="content">	
    <div data-role="fieldcontain">
    <label for="name"> Crops:Berley    </label>   <label for="name"> Stage: 2 leaf unfolded  </label>
    <a href="#page5" data-role="button">Add Weed</a> 
    <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
	  
	   <input type="checkbox" name="checkbox-2" id="checkbox-2" class="custom" />
	   <label for="checkbox-2">American nightshad</label>
        <input type="checkbox" name="checkbox-3" id="checkbox-3" class="custom" />
	   <label for="checkbox-3">Bluebuer</label>
        <input type="checkbox" name="checkbox-4" id="checkbox-4" class="custom" />
	   <label for="checkbox-4">Cocklebur</label>
       
    </fieldset>
     <h4>Herbicide</h4>	 
        <li><a href="#page6">Bromoxynil</a></li>
        <li><a href="#page6">Bromoxynil/MCPA ester</a></li>
         
</div>
    
</div>	
		
	</div>
      
     <li><a href="#page3">Back</a></li> 
    
	<div data-role="footer">
		
	</div>
</div>
<div data-role="page" id="page5">
	<div data-role="header">
		<h1>Add Weed</h1>
	</div>
	<div data-role="content">	
    <h4>Weed List</h4>	
		<li><a href="">American nightshade</a></li>
        <li><a href="">Annual smartweed</a></li>
        <li><a href="">Bluebuer </a></li>
        <li><a href="">Cocklebur</a></li>
        <li><a href="">Cow cockle</a></li> 
		
	</div>
     <h4>Stage List</h4>	
		 <li><a href="">2 leaf unfolded(12)</a></li>
        <li><a href="">3 leaf unfolded(13)</a></li>
        <li><a href="">4 leaf unfolded(14))</a></li>  
		 <a href="#page4" data-role="button">Add to weedlist</a> 
     <a href="#page4" data-role="button">Back</a>  
	</div>
    
	<div data-role="footer">
		<h4></h4>
	</div>
</div>
<div data-role="page" id="page6">
	<div data-role="header">
		<h1>Products</h1>
	</div>
	<div data-role="content">	
		  
        <li><a href="#page7">Pardner</a></li>
        <li><a href="#page7">Koril 235</a></li>
        <li><a href="#page7">Bromotril</a></li>
        
	</div>
	<div data-role="footer">
		
       <li><a href="#page5">Back</a></li>   
	</div>
</div>
<div data-role="page" id="page7">
	<div data-role="header">
		<h1>Products Details</h1>
	</div>
	<div data-role="content">	
		  
        
        
	</div>
	<div data-role="footer">
		 <li><a href="#page6">Back</a></li> 
	</div>
</div>

</body>
</html>
